<script lang="ts" setup>
import { Warning } from '@element-plus/icons-vue'
import { useAttrs } from 'vue'

const attrs = useAttrs()

// 处理错误信息
function getErrorInfo(error: string): string {
  let text = error
  if (/^[a-zA-Z0-9|\s|.]*$/.test(text)) {
    text = `请输入${attrs.label || attrs.requireError}`
  }
  return text
}
</script>

<template>
  <ElFormItem>
    <template v-if="attrs.label" #label>
      <span class="label-info">
        {{ attrs.label }}
        <span v-if="attrs.tip" class="label-info-icon">
          <el-tooltip :content="`${attrs.tip}`" effect="dark" placement="top">
            <el-icon color="rgba(0,0,0,0.45)"><Warning /></el-icon>
          </el-tooltip>
        </span>
        :
      </span>
    </template>
    <template #error="{ error }">
      <span class="error-info">
        {{ getErrorInfo(error) }}
      </span>
    </template>
    <slot></slot>
  </ElFormItem>
</template>

<style scoped lang="scss">
.error-info {
  color: red;
  font-size: 13px;
  line-height: 1.5;
  display: block;
}
.label-info {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.label-info-icon {
  padding: 0 3px;
  line-height: 32px;
  display: flex;
  align-items: center;
  cursor: help;
}
</style>
